<template>
  <AuthenticationLogin :form-schema="formSchema" />
</template>

<script setup lang="ts">
import { ref, reactive, computed, markRaw } from "vue";
import { useAuthStore } from "#/store/auth";
import type { BasicOption } from "@general/types";
import { $t } from "@general/locales";
import { AuthenticationLogin, z } from "@general/common-ui";
import type { GeneralFormSchema } from "@general/common-ui";
defineOptions({
  name: "Login",
});

const MOCK_USER_OPTIONS: BasicOption[] = [
  {
    label: "Super",
    value: "general",
  },
  {
    label: "Admin",
    value: "admin",
  },
  {
    label: "User",
    value: "jack",
  },
];
const formSchema = computed((): GeneralFormSchema[] => {
  return [
    {
      component: "GeneralSelect",
      componentProps: {
        options: MOCK_USER_OPTIONS,
        placeholder: $t("authentication.selectAccount"),
      },
      fieldName: "selectAccount",
      label: $t("authentication.selectAccount"),
      rules: z
        .string()
        .min(1, { message: $t("authentication.selectAccount") })
        .optional()
        .default("vben"),
    },
    {
      component: "GeneralInput",
      componentProps: {
        placeholder: $t("authentication.usernameTip"),
      },
      dependencies: {
        trigger(values, form) {
          if (values.selectAccount) {
            const findUser = MOCK_USER_OPTIONS.find(
              (item) => item.value === values.selectAccount
            );
            if (findUser) {
              form.setValues({
                password: "123456",
                username: findUser.value,
              });
            }
          }
        },
        triggerFields: ["selectAccount"],
      },
      fieldName: "username",
      label: $t("authentication.username"),
      rules: z.string().min(1, { message: $t("authentication.usernameTip") }),
    },
    {
      component: "GeneralInputPassword",
      componentProps: {
        placeholder: $t("authentication.passwordTip"),
      },
      fieldName: "password",
      label: $t("authentication.password"),
      rules: z.string().min(1, { message: $t("authentication.passwordTip") }),
    },
    // {
    //   component: markRaw()
    // }
  ];
});
</script>
